/* 
手势滑动组件
1 slot 插槽功能
2 向父组件传递数据 - 滑动的方向
*/

<template>
  <view @touchstart="handleTouchstart" @touchend="handleTouchend">
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 按下的时间
      startTime: 0,
      // 按下的坐标
      startX: 0,
      startY: 0
    };
  },
  methods: {
    // 按下屏幕
    handleTouchstart(event) {
      this.startTime = Date.now();
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 离开屏幕
    handleTouchend(event) {
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;
      let direction = '';

      // 按下屏幕的时长
      if (endTime - this.startTime > 2000) {
        return false;
      }

      // 滑动的距离 要同时判断水平滑动和垂直滑动
      if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10) {
        direction = endX - this.startX > 0 ? 'right' : 'left';
      } else {
        return false;
      }

      // 子向父传递数据
      this.$emit('swiperAction', { direction });
    }
  }
};
</script>

<style>
</style>